<script setup>
import { ref, onMounted } from 'vue'
import { getListApi, updateStatusApi, replyApi } from '@/api/comment'
import { toast } from '@/utils/elnotification'

//搜索框
const searchform = ref({
  title: ''
})

//绑定表格数据
const tableData = ref([])
//总页数
const total = ref(0)
//当前页
const currentPage = ref(1)

//搜索事件
const onSearch = () => {
  getList()
}

//重置
const onReset = () => {
  searchform.value.title = ''
  getList()
}

const loading = ref(false)

//获取数据
const getList = async () => {
  loading.value = true
  const res = await getListApi(currentPage.value, { title: searchform.value.title }).finally(() => [
    (loading.value = false)
  ])
  total.value = res.totalCount
  tableData.value = res.list.map((item) => {
    item.statusLoading = false
    return item
  })
}
//切换状态
const onChangeStatus = async (status, row) => {
  row.statusLoading = true
  try {
    await updateStatusApi(row.id, status)

    toast('修改状态成功')
    row.status = status
  } catch (error) {
  } finally {
    row.statusLoading = false
  }
}

//回复框默认不显示
const isChangeComment = ref(false)

//回复框内容
const textarea2 = ref('')

//修改评论的ID
const commentId = ref(0)

//修改评论
const onChangeComment = (row) => {
  //回复框显示
  isChangeComment.value = true

  //评论回显
  textarea2.value = row.review.data

  //保存评论id
  commentId.value = row.id
}

//取消评论
const onCancel = () => {
  //评论清空
  textarea2.value = ''
  commentId.value = 0
  //回复框不显示
  isChangeComment.value = false
}

//确认回复
const onConfirmReply = async () => {
  try {
    await replyApi(commentId.value, textarea2.value)
    toast('评论修改成功')
    isChangeComment.value = false
    getList()
  } catch (error) {
    toast('当前为演示环境', 'error')
  }
}

onMounted(() => {
  getList()
})
</script>

<template>
  <el-card shadow="never" class="border-0">
    <!-- 搜索 -->
    <el-form :model="searchform" label-width="80px" class="mb-3" size="small">
      <el-row :gutter="20">
        <el-col :span="8" :offset="0">
          <el-form-item label="关键词">
            <el-input v-model="searchform.title" placeholder="要搜索的商品" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="8">
          <div class="flex items-center justify-end">
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column type="expand">
        <template #default="{ row }">
          <div class="ml-13 flex">
            <el-avatar class="mr-3" size="large" :src="row.user.avatar" />
            <div class="flex-1">
              <p>
                {{ row.user.username }}
                <span class="text-gray-400 text-[12px]">{{ row.review_time }}</span>
              </p>
              <p>{{ row.review.data }}</p>
              <el-image
                v-for="(item, index) in row.review.image"
                :key="index"
                class="rounded-md mr-3 my-3"
                style="width: 100px; height: 100px"
                :src="item"
              />
              <div
                class="mt-3 bg-gray-100 p-3 rounded"
                v-if="!isChangeComment || row.id !== commentId"
              >
                <div class="flex justify-between items-center">
                  <h6 class="mt-0 flex text-md font-bold">客服</h6>
                  <el-button type="info" size="small" @click="onChangeComment(row)">修改</el-button>
                </div>
                <p>{{ row.extra[0].data }}</p>
              </div>
              <!-- 回复框 -->
              <div v-if="isChangeComment && row.id == commentId">
                <el-input
                  v-model="textarea2"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  class="mb-2"
                />
                <el-button type="primary" size="small" @click="onConfirmReply">回复</el-button>
                <el-button size="small" @click="onCancel">取消</el-button>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id" width="50" />
      <el-table-column label="商品" width="300">
        <template #default="{ row }">
          <div class="flex">
            <el-image
              class="rounded-md mr-3"
              style="width: 60px; height: 60px"
              :src="row.goods_item.cover"
            />
            <p>{{ row.goods_item.title }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="评价信息" prop="name" width="150">
        <template #default="{ row }">
          <div>
            <p>用户:{{ row.user.username }}</p>
            <el-rate :model-value="Number(row.rating)" disabled show-score text-color="#ff9900" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="评价时间" prop="review_time" />
      <el-table-column label="是否显示">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            @change="onChangeStatus($event, row)"
            :loading="row.statusLoading"
            :disabled="row.super == 1"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
